<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>后台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="__PUBLIC__/build/css/layui.css"  media="all">
    <link rel="stylesheet" href="__PUBLIC__/res/css/global.css" media="all">
    <style>
        .layui-layout-admin .layui-body{
            top: 55px;
        }
        .top_nav{
            left: 175px;
        }
        .user-info{
            position: absolute;
            right: 0;
            line-height: 60px;
        }
        .user-info .user_head{
            float: right;
            display: block;
        }
        .user-info .user_head i{
            font-size: 22px;
            color: #FFFFFF;
        }
        .user-info .user_head:hover{

        }
        .user-info ul.user_op{
            clear: both;
            background: #ffffff;
            border: 1px solid #cccccc;
            margin: 60px 0 0 0;
        }
        .user_op li a{
            display: block;
            padding: 0 18px;
            line-height: 40px;
            border-bottom: 1px solid #cccccc;
        }
        .nav-sidebar .layui-nav-child{
            text-indent: 10px;
        }

        .layui-tab{
            margin: 10px 0 10px 5px;
        }
        .site-demo-result::-webkit-scrollbar{width:0px}
        .tab-control ul li{
            padding: 6px 2px;
            text-align: center;
        }
        .tab-control ul li:hover{
            background: #282B33;
            color: #ffffff;
        }

        .layui-footer{
            display: none;
        }
    </style>

</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div class="layui-header header header-demo">
        <div class="layui-main">
            <a class="logo" href="/">
                <img src="__PUBLIC__/res/images/logo.png" alt="layui">
            </a>

            <ul class="layui-nav top_nav" pc>
                <volist name="navList" id="vo">
                    <li class="layui-nav-item" pc>
                        <a href="javascript:;" onclick="showSonMenu('{$vo.pk_id}');">{$vo.name}</a>
                    </li>
                </volist>
                <li class="layui-nav-item" pc>
                    <a href="javascript:;">周边</a>
                    <dl class="layui-nav-child">
                        <dd><a href="http://layim.layui.com/" target="_blank">即时通讯</a></dd>
                        <!--<dd><a href="javascript:;" onclick="layer.tips('尚未推出', this, {tips: [4, '#009688']});">后台模版</a></dd>-->
                    </dl>
                </li>
                <li class="layui-nav-item" mobile>
                    <a href="javascript:;">导航</a>
                    <dl class="layui-nav-child">
                        <dd><a href="http://fly.layui.com/" target="_blank">社区</a></dd>
                    </dl>
                </li>
            </ul>

            <div class="user-info" onmouseout="$('.user_op').hide();" onmouseover="$('.user_op').show();">
            <!--<div class="user-info">-->
                <a class="user_head" href="javascript:;"><i class="layui-icon">&#xe612;</i></a>
                <ul class="user_op" style="display: none;">
                    <li><a href="javascript:;">你好,{$adminInfo['nickname']}</a></li>
                    <li><a class="menus" href="javascript:;" data-page="{:U('System/Admin/modifySelfInfo')}">修改信息</a></li>
                    <li><a class="menus" href="javascript:;" data-page="{:U('System/Public/loginOut')}">退出登录</a></li>
                </ul>
            </div>
        </div>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav nav-sidebar layui-nav-tree site-demo-nav">
                <li class="layui-nav-item layui-nav-itemed">
                    <a data-page="http://192.168.1.80/new_cms/System/Index/index.html" href="javascript:;">权限管理<span class="layui-nav-more"></span></a>
                    <dl class="layui-nav-child">
                        <dd class="layui-this">
                            <a data-page="http://192.168.1.80/new_cms/System/Role/index.html" href="javascript:;" class="menus">角色</a>
                        </dd>
                        <dd>
                            <a data-page="http://192.168.1.80/new_cms/System/Admin/index.html" href="javascript:;" class="menus">管理员</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a data-page="http://192.168.1.80/new_cms/System/Index/index.html" href="javascript:;">系统管理<span class="layui-nav-more"></span></a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a data-page="http://192.168.1.80/new_cms/System/Action/index.html" href="javascript:;" class="menus">节点库</a>

                        </dd>
                        <dd>
                            <a data-page="http://192.168.1.80/new_cms/System/Access/index.html" href="javascript:;" class="menus">操作节点</a>
                        </dd>
                        <dd>
                            <a data-page="http://192.168.1.80/new_cms/System/Menu/index.html" href="javascript:;" class="menus">菜单</a>
                        </dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a data-page="http://192.168.1.80/new_cms/System/Setup/index.html" href="javascript:;">网站设置<span class="layui-nav-more"></span></a>
                    <dl class="layui-nav-child">
                        <dd>
                            <a data-page="http://192.168.1.80/new_cms/System/Setup/basic.html" href="javascript:;" class="menus">基本设置</a>
                        </dd>
                    </dl>
                </li>
                <span class="layui-nav-bar" style="top: 22.5px; height: 0px; opacity: 0;"></span>
            </ul>

            <!--<ul class="layui-nav layui-nav-tree site-demo-nav">-->
                <!--<volist name="menuList" id="vo">-->
                    <!--<li class="layui-nav-item layui-nav-itemed">-->
                        <!--<a href="javascript:;" data-page="{:U($vo['control'])}">{$vo.name}</a>-->
                        <!--<notempty name="vo['_child']">-->
                            <!--<dl class="layui-nav-child">-->
                                <!--<volist name="vo['_child']" id="vos">-->
                                    <!--<dd>-->
                                        <!--<a class="menus" href="javascript:;" data-page="{:U($vos['control'])}">{$vos.name}</a>-->
                                    <!--</dd>-->
                                <!--</volist>-->
                            <!--</dl>-->
                        <!--</notempty>-->
                    <!--</li>-->
                <!--</volist>-->
            <!--</ul>-->
        </div>
    </div>


    <div class="layui-body">
        <div class=""layui-tab lay-filter="demo" lay-allowclose="true">
            <ul class="layui-tab-title">
                <!--<li class="layui-this" lay-id="11">网站设置</li>-->
            </ul>
            <div class="layui-tab-content">
                <!--<div class="layui-tab-item layui-show">-->
                    <!--<div class="site-demo-result">-->
                        <!--<iframe frameborder="0" src="pages/system/role/index.html" id="LAY_demo"></iframe>-->
                    <!--</div>-->
                <!--</div>-->
            </div>
        </div>
    </div>

    <div class="layui-footer footer footer-demo">
        <div class="layui-main">
            <p>2017 &copy; <a href="/">layui.com</a> MIT license</p>
        </div>
    </div>
    <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
    </div>
    <div class="site-mobile-shade"></div>


    <div class="tab-control" style="display: none;">
        <ul>
            <li onclick="update_page();">刷新标签</li>
            <li onclick="close_page();">关闭标签</li>
            <li onclick="close_page('all')">关闭全部</li>
        </ul>
    </div>

    <!--http://fly.layui.com/api/handle?id=10&type=find&callback=jQuery22209811069833394578_1489645137713&_=1489645137714-->

    <script src="__PUBLIC__/res/js/jquery-2.2.2.min.js"></script>
    <script src="__PUBLIC__/build/layui.js" charset="utf-8"></script>
    <script>
        console.log(JSON.parse('{:json_encode($navList)}'));

        layui.use('element', function(){
            var $ = layui.jquery,element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块

            //重新计算高度
            var asas = document.documentElement.clientHeight - $('.layui-header').height();
            $('.layui-body').css('height',asas - 10);
            $('.layui-tab-content iframe').css('height',asas - 90);

            $(document).bind("contextmenu",function(e){
                return false;
            });

            $('.layui-tab-title').mousedown(function (e) {
                if(3 == e.which){
                    console.log(e);
                    layer.tabControlIndex = layer.open({
                        title: '操作',
                        type: 1,
                        skin: 'layui-layer-demo', //样式类名
                        closeBtn: 1, //不显示关闭按钮
                        anim: 0,
                        isOutAnim: false,
                        shadeClose: true, //开启遮罩关闭
                        offset: [e.pageY, e.pageX],
                        content: $('.tab-control')
                    });
                }
            });


            //触发事件
            var active = {
                tabAdd: function(othis){
                    //新增一个Tab项
                    element.tabAdd('demo', {
                        title: $(othis).text() //用于演示
                        ,content: '<div class="site-demo-result"><iframe frameborder="0" src="'+$(othis).attr('data-page')+'"></iframe></div>'
                        ,id: $(othis).text() //实际使用一般是规定好的id，这里以时间戳模拟下
                    })
                    element.tabChange('demo', $(othis).text());
                }
                ,tabDelete: function(othis){
                    //删除指定Tab项
                    element.tabDelete('demo', '44'); //删除：“商品管理”
                    othis.addClass('layui-btn-disabled');
                }
                ,tabChange: function(){
                    //切换到指定Tab项
                    element.tabChange('demo', '22'); //切换到：用户管理
                }
            };
            $('.layui-nav-item a.menus,a.menus').click(function () {
                var othis = $(this),page_name = othis.text();
                if($(".layui-tab-title li[lay-id='"+page_name+"']").length == 1){
                    element.tabChange('demo', page_name); //切换到指定选项卡
                }else{
                    active['tabAdd'].call(this,othis);
                }
            });

            $('.layui-nav-item a.menus').eq(0).click();



            //Hash地址的定位
            var layid = location.hash.replace(/^#test=/, '');
            element.tabChange('test', layid);
            element.on('tab(test)', function(elem){
                location.hash = 'test='+ $(this).attr('lay-id');
            });
        });

        layui.config({
            base: '__PUBLIC__/res/js/modules/'
            ,version: '1488795362026'
        }).use('global');

        window.global = {
            preview: function(){
                var preview = document.getElementById('LAY_preview');
                return preview ? preview.innerHTML : '';
            }()
        };
        function openPage(obj){

        }

        function update_page(){
            layer.close(layer.tabControlIndex);
            $('.layui-show iframe').attr('src',$('.layui-show iframe').attr('src'));
        }

        function close_page(type){
            layer.close(layer.tabControlIndex);
            if(type == 'all'){
                $('.layui-tab-close').click();
            }else{
                $('.layui-this .layui-tab-close').click();
            }
        }
    </script>
</div>
</body>
</html>